<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" type="image/x-icon" href="pic/title.png" />
<title>红满堂2015招新报名</title>
<style>
body{
	background:#ABABAB;
	text-align:center;
}
.container{
	width:670px;
	margin:10% auto 0 auto;
}
.left{
	float:left;
	text-align:center;
}
.find{
	padding-top:10px;
	animation:find 0.6s;
	animation-delay:0.3s;
	animation-fill-mode:both;
}
@keyframes find{
	from{transform:rotateX(90deg);
	-webkit-transform:rotateX(90deg);   /* Safari and Chrome */
	-moz-transform:rotateX(90deg);      /* Firefox */
	-ms-transform: rotateX(90deg);		/* IE 9 */
	-o-transform: rotateX(90deg);		/* Opera */	}
	to{};
}
.circle1{
	padding-top:5px;
	position:relative;
	-webkit-user-select: text;
	animation-direction: normal;
	animation-duration: 0.6s;
	animation-fill-mode: both;
	animation-name: circle1;
	animation-play-state: running;
	animation-timing-function: ease;
}
@keyframes circle1{
	from{left:0px;
	top:-150px;}
	to{left:0px;
	top:0px;
	}
}
.circle2{
	clear:both;
	position:relative;
	z-index:1;
	animation:circle2 2.2s;
	animation-direction:alternate;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
}
@keyframes circle2{
	0% {left:110px;top:-85px;}
	25% {left:120px;top:-105px;}
	50% {left:135px;top:-125px;}
	75% {left:140px;top:-145px;}
	100% {left:135px;top:-165px}
}
.sent-button{
	position:relative;
	top:-10px;
	left:-30px;
	border-radius:8px;
	width:150px;
	color:#fff;
	padding:6px 22px;
	font-family:"幼圆", "楷体";
	font-size:22px;
	text-decoration:none;
	background:#A40000;
	animation:sent-button 0.6s;
	animation-delay:0.3s;
	animation-fill-mode:both;
}
@keyframes sent-button{
	from{transform:rotateX(90deg);
	-webkit-transform:rotateX(90deg); /* Safari and Chrome */
	-moz-transform:rotateX(90deg);/* Firefox */
	-ms-transform:rotateX(90deg);
	-o-transform:rotateX(90deg);}
	to{};
}
.right-jpg{
	position:relative;
	animation:right-jpg 0.6s;
	animation-fill-mode:both;
}
@keyframes right-jpg{
	from{left:500px;}
	to{left:0px};
}
#link{
	float:right;
	width:350px;
	margin-top:20px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:0px;
	padding:0;
	position:relative;
	list-style-type:none;
}
#link li{
	background:#666;
	margin-right:10px;
	padding:3px 15px;
	display:inline;
}
#link li a{
	text-decoration:none;
	color:#fff;
	font:"黑体", "楷体", "宋体", "微软雅黑";
}
</style>
</head>

<body>
<div class="container">
<div class="left">
	<img src="pic/find.jpg" class="find"/>
    <br/>
    <img src="pic/circle1.jpg" class="circle1"/><br/>
    <img src="pic/circle2.png" class="circle2"/>
    <a href="Form.html" target="_blank" class="sent-button">提交简历</a>
</div>

<div id="right">
	<img src="pic/right.jpg" class="right-jpg"/>
    <ul id="link">
        <li><a href="Web.html" target="_blank"><b>技术类</b></a></li>
        <li><a href="Design.html"><b>设计类</b></a></li>
        <li><a href="Moderator.html"><b>版主</b></a></li>
        <li><a href="Operate.html"><b>运营</b></a></li>
    </ul>
</div>
</div>


<script>
	function addLoadEvent(func){
		var oldonload=window.onload;
		if(typeof window.onload!='function')
			window.onload=func;
		else{
			window.onload=function(){
				oldonload();
				func();
			}
		}
	}
	
	function insertAfter(newElem,targetElem){
		var parent=targetElem.parentNode;
		if(parent.lastChild==targetElem)
			parent.appendChild(newElem);
		else
			parent.insertBefore(newElem,targetElem.nextSibling);		
	}
	
	function showPic(){
		if(!document.createElement||!document.getElementsByTagName
			||!document.getElementById("right")) return false;
		var pic=document.createElement("img");
		pic.setAttribute("id","pic");
		pic.setAttribute("src","pic/link.png");
		pic.style.position="absolute";
		pic.style.left="580px";
		pic.style.top="340px";
		pic.style.width="150px";
		
		var right=document.getElementById("right");
		insertAfter(pic,right);
	}
	
	function prepareHover(){
		if(!document.getElementById||!document.getElementById("link")||!document.getElementsByTagName) return false;
		var links=document.getElementById("link");
		var a=links.getElementsByTagName("a");
		if(a.length==0) return false;
		for(var i=0;i<a.length;i++){
			a[i].onmouseover=function(){
				var href=this.getAttribute("href");
				var pic=document.getElementById("pic");
				if(href.indexOf("Web.html")!=-1)
					pic.setAttribute("src","pic/link1.png");
				if(href.indexOf("Design.html")!=-1)
					pic.setAttribute("src","pic/link2.png");
				if(href.indexOf("Moderator.html")!=-1)
					pic.setAttribute("src","pic/link3.png");
				if(href.indexOf("Operate.html")!=-1)
					pic.setAttribute("src","pic/link3.png");				
			}
			a[i].onmouseout=function(){
				var pic=document.getElementById("pic");
				pic.setAttribute("src","pic/link.png");	
			}
		}
	}
	addLoadEvent(showPic);
	addLoadEvent(prepareHover);
</script>
</body>
</html>
